<template>
    <div class="box">
        <header class="header">
            <NavBar title="订单详情" />
        </header>
        <div class="content" v-if="myorderDetail.address">
            <h3 style="text-align: center; line-height: 40px ;">{{ myorderDetail.status == '1' ? '待付款' : '待发货' }}</h3>
            <van-cell :title="myorderDetail.address.name + ' ' + myorderDetail.address.tel"
                :label="myorderDetail.address.address" />
            <van-swipe-cell v-for="item in myorderDetail.orderList" :key="item.id">
                <van-card :num="item.count" :price="item.price" :title="item.title" :thumb="item.image" />
            </van-swipe-cell>
            <div class="info">
                <van-row>
                    <van-col span="6">订单编号：</van-col>
                    <van-col span="18">{{ myorderDetail.id }}</van-col>
                </van-row>
                <van-row>
                    <van-col span="6">支付方式：</van-col>
                    <van-col span="18">{{ myorderDetail.status == '1' ? '待付款' : '在线支付' }}</van-col>
                </van-row>
                <van-row>
                    <van-col span="6">配送方式：</van-col>
                    <van-col span="18">快递运输</van-col>
                </van-row>
                <van-row>
                    <van-col span="6">订单总额：</van-col>
                    <van-col span="18">{{ myorderDetail.price }}</van-col>
                </van-row>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="bottom">
            <van-button class="button" size="small" round>删除订单</van-button>
            <van-button class="button" size="small" round>看相似</van-button>
            <van-button class="button" size="small" round type="danger">再次购买</van-button>
        </div>
    </footer>
</template>
<script setup>
import NavBar from '@/components/NavBar.vue';
import { useCounterStore } from '@/stores/counter'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const store = useCounterStore()
const route = useRoute()
const myorderDetail = ref({})
onMounted(() => {
    myorderDetail.value = store.myorderList.find(item => item.id == route.params.id)
})
</script>
<style lang="scss" scoped>
.info {
    background: #fff;
    color: #878888;
    margin-top: 10px;
    padding: 10px;
    font-size: 14px;
}

.bottom {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;

    .button {
        margin: 10px;
    }
}
</style>
